import React, { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header/title-header';
import DataStats from '../data-stats/data-stats';
import LineChart from '../line-chart/line-chart';
import './index.scss';

export interface TrafficFlowPredictionProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 状态栏配置
   */
  statusBar?: {
    title?: string;
    subtitle?: string;
  };

  /**
   * 数据统计配置 - 使用 DataStats 组件
   */
  dataStats?: {
    width?: number | string;
    height?: number | string;
    backgroundImage?: string;
    mainValue?: {
      text?: string;
      fontSize?: number;
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
      gradient?: {
        enabled?: boolean;
        colors?: string[];
        direction?: string;
      };
    };
    unitConfig?: {
      text?: string;
      fontSize?: number;
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
    title?: {
      text?: string;
      fontSize?: number;
      color?: string;
      fontFamily?: string;
      fontWeight?: string | number;
      letterSpacing?: string;
      lineHeight?: string;
    };
    bottomPanel?: {
      backgroundImage?: string;
      leftText?: {
        text?: string;
        fontSize?: number;
        color?: string;
        fontFamily?: string;
        fontWeight?: string | number;
        letterSpacing?: string;
        lineHeight?: string;
      };
      rightText?: {
        text?: string;
        rankNumber?: string;
        fontSize?: number;
        color?: string;
        fontFamily?: string;
        fontWeight?: string | number;
        letterSpacing?: string;
        lineHeight?: string;
      };
    };
    theme?: 'light' | 'dark';
  };
  /**
   * 交通日线图
   */
  dayChartTitle?: {
    title?: string;
  };
  /**
   * 折线图配置
   */
  lineChart?: {
    data?: any[];
    config?: any;
    width?: number;
    height?: number;
  };

  __designMode?: boolean;
}

const TrafficFlowPrediction = forwardRef<HTMLDivElement, TrafficFlowPredictionProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  statusBar = {},
  dataStats = {},
  dayChartTitle = {},
  lineChart = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `traffic-flow-prediction ${className}`.trim();
  const customStyle: React.CSSProperties = {
    ...style,
    width: '500px',
    height: '580px',
  };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');


  return (
    <div
      ref={ref}
      className={finalClassName}
      style={customStyle}
      {...otherProps}
    >
      {/* 状态栏 */}
      <StatusBar
        chineseText={statusBar.title || "流量预测"}
        englishText={statusBar.subtitle || "TRAFFIC PREDICTION"}
        noResponsiveScale={noResponsiveScale}
      />

      {/* 主要内容区域 */}
      <div className="traffic-flow-prediction-content">

        {/* 数据统计区域 - 使用 DataStats 组件 */}
        <div className="data-stats-section">
          <DataStats
            {...dataStats}
            __designMode={__designMode}
          />
        </div>

        {/* 4交通日线图*/}
        <div className="forty-eight-hour-section">
          <TitleHeader
            title={dayChartTitle.title || "交通日线图"}
            iconUrl="/static/images/yingjiguanli/编组 31.png"
            noResponsiveScale={noResponsiveScale}
          />
        </div>

        {/* 折线图 */}
        <div className="chart-section">
          <LineChart
            height={lineChart.height || 180}
            width={lineChart.width || 500}
            data={lineChart.data || []}
            config={lineChart.config || {}}
            noResponsiveScale={noResponsiveScale}
          />
        </div>
      </div>
    </div>
  );
});

TrafficFlowPrediction.displayName = 'TrafficFlowPrediction';

export default TrafficFlowPrediction;